<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>路由传参</title>
</head>

<body>
  <div id="app">
    <h1>声明式导航 - 传参</h1>
    <!-- 如果定义该方式，路径层级过多，而且影响/login访问 -->
    <router-link to="/login/1/张三/123456/云南省昆明市">登录 -路径字符串</router-link>|
    <!-- 错误写法:params只能和name结合使用 -->
    <router-link :to="{path:'/register',params:{id:1001,username:'lisi'}}">注册1001 - 配置对象 - path(有问题)</router-link>|
    <!-- 正确写法 -->
    <router-link :to="{name:'center',params:{id:1002,username:'王五'}}">中心1002 - 配置对象 - name</router-link>|

    <h1>编程式导航 - 传参</h1>
    <button type="button" @click="doIndex">首页</button>
    <button type="button" @click="doWelcome">欢迎</button>
    <router-view></router-view>
  </div>

  <template id="login">
    <div>
      <h2>我是登录组件</h2>
      <!-- $route.query只能获取路径拼接的参数 -->
      <p>{{$route.query}}</p>
      <!-- $route.params -->
      <p>{{$route.params.address}}</p>
    </div>
  </template>

  <template id="register">
    <div>
      <h2>我是注册组件1001</h2>
      <p>{{$route.params.id}}</p>
    </div>
  </template>

  <template id="center">
    <div>
      <h2>我是中心组件1002</h2>
      <p>{{$route.params.id}}</p>
    </div>
  </template>

  <template id="index">
    <div>
      <h2>我是首页组件1003</h2>
      <p>{{$route.params.id}}</p>
    </div>
  </template>

  <template id="welcome">
    <div>
      <h2>我是欢迎组件1005</h2>
      <p>{{$route.params.id}}</p>
    </div>
  </template>

  <script src="../js/vue.js"></script>
  <script src="../js/vue-router.js"></script>
  <script>
    // 定义组件
    let Login = {
      template: '#login'
    }
    let Register = {
      template: '#register'
    }
    let Index = {
      template: '#index'
    }
    let Welcome = {
      template: '#welcome'
    }
    let Center = {
      template: '#center'
    }

    // 定义路由列表
    let routes = [{
        path: '/login/:id/:username/:userpwd/:address',
        component: Login
      },
      {
        path: '/register',
        component: Register
      },
      {
        path: '/index',
        name:'index',
        component: Index
      },
      {
        path: '/welcome',
        name:'welcome',
        component: Welcome
      },
      {
        path: '/center',
        name: 'center',
        component: Center
      }
    ]

    // 定义路由器
    let router = new VueRouter({
      routes
    })

    // 创建Vue实例
    const vm = new Vue({
      el: '#app',
      data: {},
      methods: {
        doIndex() {
          // 下面两种都是错误写法
          // this.$router.push({path:'/index',params:{id:1003,username:'一零零三'}})
          // this.$router.push({path:'/index',query:{id:1004,username:'一零零四'}})
        },
        doWelcome() {
          this.$router.push({name:'welcome',params:{id:1005,username:'一零零五'}})
          // this.$router.push({path:'/index',query:{id:1006,username:'一零零六'}})
        }
      },
      router: router //绑定路由器
    })
  </script>
</body>

</html>